import {
  _decorator,
  Component,
  EventTouch,
  instantiate,
  Node,
  Prefab,
  tween,
  Vec2,
  Vec3,
} from "cc";
import { GameManager } from "./GameManager";
const { ccclass, property } = _decorator;

@ccclass("Basket")
export class Basket extends Component {
  @property(Prefab)
  public featureWorkLabelPrefab: Prefab = null;

  @property(Node)
  public restartPanel: Node = null;

  @property(Vec2)
  public minBoundary = new Vec2(-250, -390);

  @property(Vec2)
  public maxBoundary = new Vec2(250, 390);

  private _offset: Vec3 = new Vec3();

  private _isDragging: boolean = false;

  protected onLoad(): void {
    this.addEventListener();
  }

  protected start() {
    this.scheduleOnce(() => {
      this.removeEventListener();

      const featureWorkLabelNode = instantiate(this.featureWorkLabelPrefab);
      this.node.addChild(featureWorkLabelNode);
      featureWorkLabelNode.y = 100;
      const t1 = tween(featureWorkLabelNode).to(
        1.5,
        { position: new Vec3(0, 100, 0) },
        { easing: "backInOut" }
      );
      const t2 = tween(this.node).to(
        2,
        { position: new Vec3(0, 200, 0) },
        { easing: "smooth" }
      );

      t1.call(() => {
        t2.call(() => {
          this.restartPanel.active = true;
        }).start();
      }).start();
    }, GameManager.getInstance().gameTime);
  }

  protected update(deltaTime: number) {}

  protected onDestroy(): void {
    this.removeEventListener();
  }

  public addEventListener() {
    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
  }

  public removeEventListener() {
    this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
  }

  private onTouchStart(event: EventTouch) {
    const touchLocation = event.getUILocation();
    const currentPostion = this.node.getPosition();
    this._offset.set(
      touchLocation.x - currentPostion.x,
      touchLocation.y - currentPostion.y
    );
    this._isDragging = true;
    console.log("Basket onTouchStart");
  }

  private onTouchMove(event: EventTouch) {
    if (!this._isDragging) return;
    const touchLocation = event.getUILocation();
    const newPosition = new Vec3(
      touchLocation.x - this._offset.x,
      touchLocation.y - this._offset.y
    );

    const pos = this.clampPosition(newPosition);
    this.node.setPosition(pos);
    console.log("Basket onTouchMove");
  }

  private onTouchEnd(event: EventTouch) {
    this._isDragging = false;
    console.log("Basket onTouchEnd");
  }

  private clampPosition(position: Vec3) {
    // l-r  -250  250
    // b-t  -390  390
    // if (position.x < -250) {
    //   position.x = -250;
    // } else if (position.x > 250) {
    //   position.x = 250;
    // }
    // if (position.y < -390) {
    //   position.y = -390;
    // } else if (position.y > 390) {
    //   position.y = 390;
    // }

    const clampX = Math.max(
      this.minBoundary.x,
      Math.min(this.maxBoundary.x, position.x)
    );

    const clampY = Math.max(
      this.minBoundary.y,
      Math.min(this.maxBoundary.y, position.y)
    );

    return new Vec3(clampX, clampY);
  }
}
